<template>
    <div class="container learning-container">
        <system-nav name="发布文件">
            <template #addBtn>
                <p> 
                    <Button type="primary" @click="openUploadDialog">发布文件</Button>
                </p>
            </template>
        </system-nav>
        <div class="inner">
            <div class="tool-bar">
                <Form class="search-bar" ref="searchForm" :model="searchForm" :label-width="75" :inline="true">
                    <FormItem label="文件名称："> 
                        <Input class="search-input" type="text" v-model.trim="searchForm.searchText" clearable
                            @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入文件名称">
                        </Input>
                    </FormItem>
                    <FormItem label="时间：">
                        <DatePicker type="datetime" v-model="searchForm.startTime" :options="pickerOptions" placeholder="请选择开始时间"></DatePicker>
                            至   
                        <DatePicker type="datetime" v-model="searchForm.endTime" :options="pickerOptions" placeholder="请选择结束时间"></DatePicker>
                    </FormItem>
                    <FormItem class="no-label">
                        <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                    </FormItem>
                </Form>    
            </div>
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="createTime">
                    {{ row.createTime | formatDate }}
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div class="action-btns">
                        <Button type="text" size="small" @click="download(row)">下载</Button>
                        <Button type="text" size="small" @click="remove(row)">删除</Button>
                    </div>
                </template>
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="total" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts"
                        show-total show-elevator show-sizer
                        @on-change="changePage" @on-page-size-change="changePageSize">
                    </Page>
                </div>
            </div>
            <upload-file :showModal="showUploadModal" @closeUploadModal="closeUploadModal"></upload-file>
            <system-spin :showModal="showSpinModal" :text="spinText"></system-spin>
        </div>              
    </div>
</template>

<script>
import moment from 'moment'
import SystemNav from '@/components/SystemNav'
import SystemSpin from '@/components/SystemSpin'
import UploadFile from '@/components/UploadFile'
import mixin from '@/mixins'
import { BaseURL } from '@/common/apis/config'
import { sendFileMessageListRest, downloadFileRest, deleteFileMessageRest } from '@/common/apis/system'
import { saveFile } from '@/common/utils'

export default {
    name: 'learningSendList',
    mixins: [mixin],
    components: {
        SystemNav,
        SystemSpin,
        UploadFile
    },
    data() {
        return {
            showUploadModal: false,
            showSpinModal: false,
            spinText: '下载中...',
            searchForm: {
                searchText: '',
                startTime: '',
                endTime: ''
            },
            columns: [
                {
                    title: '文件标题',
                    key: 'title',
                },
                {
                    title: '文件名称',
                    key: 'fileName',
                    className: 'table-filename',
                    tooltip: true
                },
                {
                    title: '接收组织',
                    key: 'targetDeptName'
                },
                {
                    title: '备注',
                    key: 'content',
                    tooltip: true
                },
                {
                    title: '时间',
                    key: 'createTime',
                    sortable: true,
                    sortType: 'desc',
                    slot: 'createTime'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 125,
                    slot: 'action'
                }
            ],
            data: []
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            const params = {
                pageNo: this.current,
                pageSize: this.pageSize
            }
            if (this.searchForm.searchText) {
                params.params = this.searchForm.searchText
            }
            if (this.searchForm.startTime) {
                params.startTime = moment(this.searchForm.startTime).format('YYYY-MM-DD HH:mm:ss')
            }
            if (this.searchForm.endTime) {
                params.endTime = moment(this.searchForm.endTime).format('YYYY-MM-DD HH:mm:ss')
            } 
            sendFileMessageListRest(params).then(result => {
                const data = result.data.content
                this.data = data.list
                .map(item => ({
                    ...item,
                    filePath: BaseURL + item.filePath
                }))
                this.total = data.total
            })
        },
        handleSearch() {
            if ((this.searchForm.startTime).valueOf() > (this.searchForm.endTime).valueOf()) {
                this.$Modal.warning({
                    title: '提示',
                    content: '结束时间不能早于开始时间！'
                })
                return
            }
            this.current = 1
            this.initData()
        },
        openUploadDialog() {
            this.showUploadModal = true
        },
        closeUploadModal() {
            this.showUploadModal = false
            this.initData()
        },
        download(record) {
            this.showSpinModal = true
            const params = {
                sha1: record.sha1
            }
            downloadFileRest(params).then(result => {
                this.showSpinModal = false
                saveFile(result, record.fileName)
            }).catch(() => {
                this.showSpinModal = false
            })
        },
        remove(record) {
            this.$Modal.confirm({
                title: '提示',
                content: '你确定删除当前文件吗？',
                onOk: () => {
                    deleteFileMessageRest(record.id).then(() => {
                        this.initData()
                        this.$Message.success({
                            background: true,
                            content: '删除成功'
                        })
                    })
                },
                onCancel: () => {}
            })
        }
    }
}
</script>